.simpleBar {
    max-height: 100vh;
    margin-right: 0px;
}

.simpleBar :global(.simplebar-scrollbar)::before {
    background-color: light-dark(black, white) !important;
}

.navLink {
    display: block;
    width: 100%;
    padding: var(--mantine-spacing-xs);
    border-radius: var(--mantine-radius-md);
    color: light-dark(var(--mantine-color-black), var(--mantine-color-dark-0));
    text-decoration: none;
    will-change: transform;
}

.navLink:hover:active {
    transform: translateY(2px);
}

.navLinkActive {
    background-color: light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-5));
}

.navLinkInactive:hover {
    background-color: light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-6));
}

.titleBarAdjustedHeight {
    /* used inspect element to find the first part of this calc value */
    height: calc(
        var(--_section-height, calc(100dvh - var(--app-shell-header-offset, 0px) - var(--app-shell-footer-offset, 0px))) -
            var(--titlebar-height)
    ) !important;
    margin-top: var(--titlebar-height);
}

.header {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    margin-top: var(--titlebar-height);
}

.headerRightItems {
    margin-left: auto;
}

.appShell main {
    background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-8));
}

.mediaQuery {
    display: none;
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.rotating {
    animation: rotate 1s linear infinite;
}

@keyframes moveUp {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
    100% {
        transform: translateY(0);
    }
}

.moving {
    animation: moveUp 0.5s ease-in-out infinite;
}
